<script setup>
</script>

<template>
    <div class="monitor-equipment-main">
        <div class="monitor-equipment-frame">
            <div class="monitor">
                <img src="../../../assets/bigScreen/img/monitor.png" alt="" srcset="">
            </div>
            <div class="monitor">
                <img src="../../../assets/bigScreen/img/monitor.png" alt="" srcset="">
            </div>
            <div class="monitor">
                <img src="../../../assets/bigScreen/img/monitor.png" alt="" srcset="">
            </div>
            <div class="monitor">
                <img src="../../../assets/bigScreen/img/monitor.png" alt="" srcset="">
            </div>
        </div>
    </div>
</template>

<style scoped >
    .monitor-equipment-frame{
        width: 20vw;
        height: 24vh;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between;
        padding: 0.4vw 2vw 0.4vw 2vw; /* 这里添加外边距以增加上下左右的间距 */
        box-sizing: border-box;
    }
    .monitor-equipment-frame .monitor{
        flex-basis: calc(50% - 0.6vw); /* 确保每个 monitor 占据宽度的一半减去间距 */
        height: 10vh; /* 根据你的需求设置高度 */
        margin: 0 0 1vw 0; /* 这里的 margin 将确保每个 div 之间的上下左右间距相等 */
        background-color: #ccc; /* 示例背景色 */
        text-align: center;
        line-height: 100px; /* 为了垂直居中显示内容（如果需要） */
        border: 1px solid #000; /* 示例边框 */
    }
    .monitor-equipment-frame .monitor img{
        width: 9vw;
        height: 10vh;
    }
</style>
